
<template>
  <div class="goodadd">
    <div
      class="headers"
      :class="navBarFixed == true ? 'navBarWrap' : ''"
    >
      <div class="headers_back" @click="goOff()"><i class="el-icon-arrow-left"></i>{{viewType==='add'?'新增商品':'修改商品'}}</div>
    </div>
    <div class="padding">
      <div :class="navBarFixeds == true ? 'navBarWraps' : ''">
        <div class="list-head">
          <div
            class="head-nav"
            v-for="(item, index) in main_list"
            :class="{ active: index == nums }"
            :key="index"
            @click="tabBox(index)"
          >
            {{ item.title }}
          </div>
        </div>
        <div class="list-right-head">
          <div>
            <el-button type="primary">导入商品</el-button>
          </div>
        </div>
      </div>

      <div class="list-main">
        <div class="box1" v-if="nums == 0">
          <div class="basic-main">
            <div class="title-main">基础信息</div>
            <el-form
              :rules="rules"
              label-width="80px"
              :model="formCon"
              ref="formCon1"
              style="margin-left: 5%; margin-top: 30px"
              ><!-- :model="formList"表单数据对象 -->
              <el-form-item prop="name" label="商品名称：" style="margin-bottom: 15px">
                <el-input v-model="formCon.name" show-word-limit type="text">
                </el-input>
              </el-form-item>
              <el-form-item label="商品描述：">
                <el-input
                  v-model="formCon.describe"
                  maxlength="75"
                  show-word-limit
                  type="text"
                >
                </el-input>
              </el-form-item>
              <div
                style="
                  font-size: 0.75rem;
                  color: #d7d7d8;
                  margin-left: 90px;
                  margin-top: 5px;
                "
              >
                在商品详情页名称下方展示卖点描述，建议75字以内
              </div>
              <el-form-item
                prop="class"
                label="商品分类："
                style="margin-bottom: 15px; margin-top: 10px"
              > 
                <el-select v-model="formCon.class" placeholder="请输入商品分类" clearable ref="select">
                  <!-- 设置一个input作为模糊搜索选项 -->
                  <el-input class="input" placeholder="搜索关键字" prefix-icon="el-icon-search" v-model="treeFilter"></el-input>
                  <!-- 设置一个隐藏的下拉选项 -->
                  <el-option hidden :value="options.value" :label="options.label"></el-option>
                  <!-- 设置树形控件 -->
                  <el-tree ref="tree" :data="categoriesSelect" :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node="false" :check-on-click-node="true" :filter-node-method="filterNode">
                    <span slot-scope="{data}">
                      <!-- 插槽显示，匹配搜索功能，方便增加tag标签需求 -->
                      <span>{{data.name}}</span>
                    </span>
                  </el-tree>
                </el-select>
                <!-- <el-input v-model="formCon.class" show-word-limit type="text"> -->
                </el-input>
              </el-form-item>
              <el-form-item label="商品标签：" style="margin-bottom: 15px">
                <el-select
                    v-model="formCon.sort"
                    filterable
                    allow-create
                    clearable
                    @click.native="getlabelsData"
                    placeholder="请输入商品标签"
                  >
                    <!-- <el-option
                      style="width: 292px; padding-left: 15px"
                      v-for="(item, index) in labelsData"
                      :key="index"
                      :label="item.name"
                      :value="{ value: item.id.toString(), label: item.name }"
                    >
                    </el-option> -->
                    <el-option
                      style="width: 292px; padding-left: 15px"
                      v-for="(item, index) in labelsData"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                </el-select>
                <!-- <el-input v-model="formCon.sort" show-word-limit type="text">
                </el-input> -->
              </el-form-item>
              <el-form-item label="商品编码：" style="margin-bottom: 15px">
                <el-input
                  v-model="formWeigh.cmmodityCode"
                  show-word-limit
                  type="text"
                  placeholder="若不填写则自动生成"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="购买商品赠送积分：" style="margin-bottom: 15px">
                <el-input
                  v-model="formCon.cmmodityCode"
                  show-word-limit
                  type="number"
                >
                </el-input>
              </el-form-item>
              <el-form-item
                label="商品属性："
                style="margin-bottom: 15px"
                class="commodity-attribute"
              >
                <ul
                  v-for="(attibuteItem, abindex) in fatherAttriButeValue"
                  :key="abindex"
                  style="margin-left: 10px"
                >
                  <li
                    :class="abindex === 0 ? 'commodity-margin-left' : ''"
                    style="
                      border: 1px solid #e9e9e9;
                      border-radius: 4px;
                      background: #f7f7f7;
                    "
                  >
                    <div>
                      <label :show-overflow-tooltip="true"
                        >{{ attibuteItem.attributName }}:</label
                      >
                    </div>
                    <div style="width: 245px">
                      <label>{{ attibuteItem.attributValue }}</label>
                    </div>
                    <!-- <div>
                      <label :show-overflow-tooltip="true">{{attibuteItem.attributName}}</label>
                    </div>
                    <div>
                      <el-select v-model="attibuteItem.attributValue" placeholder="请选择">
                        <el-option
                        style="width:258px;padding-left:15px;"
                          v-for="(itemk,k) in fatherAttriButeValue"
                          :key="k"
                          :label="itemk.attributValue"
                          :value="itemk.attributValue">
                        </el-option>
                      </el-select>
                    </div> -->
                    <!-- 商品属性右上方删除图标 -->
                    <div class="delIcon" style="width: 73%; display: flex">
                      <!-- left:348 -->
                      <i
                        class="el-icon-error"
                        style="
                          size: 50px;
                          color: #b7b7b7;
                          position: absolute;
                          top: -6px;
                          left: 392px;
                        "
                        @click="attriDelBute(abindex)"
                      ></i>
                    </div>
                  </li>
                </ul>
                <!-- <div>
                  <label style="line-height: 40px;">品牌</label>
                  <el-input style="width:258px;margin-left:10px;" v-model="value" show-word-limit type="text">
                </el-input>
                </div>
                <div>
                  <label style="line-height: 40px;">产地</label>
                  <el-input style="width:258px;" v-model="value" show-word-limit type="text">
                </el-input>
                </div> -->

                <!-- <div class="attbox" v-show="attbox">
                  <div
                    v-for="(item, index) in attributes"
                    :key="index"
                    class="attributes"
                    style="position: relative"
                  >
                    <el-input
                      v-model="item.atttitle"
                      show-word-limit
                      type="text"
                      placeholder="请输入属性"
                    >
                    </el-input>
                    <el-input
                      v-model="item.atttext"
                      show-word-limit
                      type="text"
                      class="er"
                      placeholder="请输入属性值"
                    >
                    </el-input>
                    <i
                      class="el-icon-circle-close"
                      style="
                        color: #b7b7b7;
                        position: absolute;
                        left: 302px;
                        top: -6px;
                      "
                      @click="deleteatt(index)"
                    ></i>
                  </div>
                </div> -->
                <div>
                  <el-button
                    style="
                      width: 100px;
                      height: 38px;
                      background-color: #436af2;
                      color: #fff;
                      font-size: 14px;
                      border-radius: 5px;
                    "
                    @click="newattribute()"
                    >新增属性</el-button
                  >
                </div>
                <div>
                  <add-attri-bute
                    ref="addBute"
                    @attributValue="attributValue"
                  ></add-attri-bute>
                </div>
              </el-form-item>
              <el-form-item ref="commodityImage" prop="imageBs" label="商品图片：" style="margin-top: 0px">
                <div class="imageUl" v-for="(item, index) in commodityImage" :key="index">
                  <div style="position:relative">
                    <img :src="item.image_url.indexOf('http://guanli.lyqswl.com') === -1?('http://guanli.lyqswl.com'+item.image_url):item.image_url" class="avatar">
                    <i
                      class="el-icon-error"
                      style="
                        cursor: pointer;
                        size: 50px;
                        color: #b7b7b7;
                        position: absolute;
                        top: -6px;
                        left: 82px;
                      "
                      @click="delImage(index)"
                    ></i>
                  </div>
                </div>
                <el-upload
                  style="overflow: hidden"
                  class="avatar-uploader"
                  action="http://guanli.lyqswl.com/index.php/Admin/index/image"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  accept="image/*"
                >
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                  <!-- <img v-if="commodityImage" :src="commodityImage" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                </el-upload>
                <div
                  style="
                    font-size: 0.75rem;
                    color: #d7d7d8;
                    margin-left: 10px;
                    height: 20px;
                    line-height: 20px;
                  "
                >
                  支持jpg、gif、png格式上传，大小建议800x800像素以上，大小不超过1M的正方形图片
                </div>
                <el-input v-show="false" v-model="formCon.imageBs" show-word-limit type="text">
                </el-input>
                <!-- action必选参数上传的地址 -->
                <!-- :show-file-list="false" 不显示已上传文件列表 -->
              </el-form-item>
              <el-form-item label="商品视频：" style="margin-top: 30px">
                <el-upload
                  style="overflow: hidden"
                  class="avatar-uploader"
                  action="http://guanli.lyqswl.com/index.php/Admin/index/image"
                  :show-file-list="false"
                  :on-success="handleVideoSuccess"
                  accept="video/*"
                >
                  <img v-if="commodityVideo" :src="commodityVideo" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div
                  style="
                    font-size: 0.75rem;
                    color: #d7d7d8;
                    margin-left: 10px;
                    height: 20px;
                    line-height: 20px;
                  "
                >
                  <!-- <el-input
                  v-model="formWeigh.cmmodityCode"
                  show-word-limit
                  type="text"
                  style="margin-left:8px;"
                  placeholder="请在此输入外链视频地址"
                >
                </el-input> -->
                </div>
                <!-- action必选参数上传的地址 -->
                <!-- :show-file-list="false" 不显示已上传文件列表 -->
              </el-form-item>
            </el-form>
          </div>
          <!-- 基本信息盒子 -->
          <div class="price-main">
            <div class="title-main">价格库存</div>
            <div class="price-con">
              <p class="more">
                <span>启用多规格</span>
                <el-switch
                  v-model="commodityMore"
                  active-color="#13ce66"
                  inactive-color="#C1C1C1"
                  style="margin-left: 10px"
                ></el-switch>
              </p>
              <div class="morebox" v-show="commodityMore == false">
                <el-form :model="formPrice" :rules="rules" ref="formCon2">
                  <el-form-item
                    style="margin-left: -9.45px"
                    prop="salePrice"
                    label="销售价："
                  >
                    <el-input
                      v-model="formPrice.salePrice"
                      show-word-limit
                      type="text"
                    >
                    </el-input
                    ><span class="element">元</span>
                  </el-form-item>
                  <el-form-item style="margin-left: -9.45px" prop="marketPrice" label="市场价：">
                    <el-input
                      v-model="formPrice.marketPrice"
                      show-word-limit
                      type="text"
                    >
                    </el-input
                    ><span class="element">元</span>
                  </el-form-item>
                  <el-form-item label="成本价：">
                    <el-input
                      v-model="formPrice.costPrice"
                      show-word-limit
                      type="text"
                    >
                    </el-input
                    ><span class="element">元</span>
                    <p class="tips">
                      成本价将不会对前台会员展示，用于商家统计使用
                    </p>
                  </el-form-item>
                </el-form>
                <el-form :model="formWeigh" ref="formCon3" class="weigh"
                  ><!-- :model="formList"表单数据对象 -->
                  <el-form-item label="重量：">
                    <el-input
                      v-model="formWeigh.weight"
                      show-word-limit
                      type="text"
                    >
                    </el-input
                    ><span class="element">kg</span>
                  </el-form-item>
                  <el-form-item label="体积：">
                    <el-input
                      v-model="formWeigh.volume"
                      show-word-limit
                      type="text"
                    >
                    </el-input
                    ><span class="element">m3</span>
                  </el-form-item>
                  <el-form-item label="库存：">
                    <el-input
                      v-model="formWeigh.stock"
                      show-word-limit
                      type="text"
                    >
                    </el-input
                    ><span class="element">件</span>
                  </el-form-item>
                </el-form>
              </div>
              <div v-show="commodityMore == true">
                <div
                  class="mores"
                  v-for="(item, index) in moresfor"
                  :key="index"
                  v-show="moresfors"
                  style="position: relative"
                >
                  <label class="sale"
                    >规格项{{ index + 1 }}{{ item.sort }}：</label
                  >
                  <el-select
                    class="specificationsSelStyle"
                    v-model="item.text"
                    filterable
                    allow-create
                    @change="handleChangeN"
                    placeholder="请输入规格项"
                  >
                    <el-option
                      style="width: 292px; padding-left: 15px"
                      v-for="(item, index) in SpecificationsData"
                      :key="index"
                      :label="item.name"
                      :value="{value:item.id.toString(),label:item.name}"
                    >
                    </el-option>
                  </el-select>

                  <span
                    v-show="index === 0"
                    style="cursor: pointer"
                    @click="imageSpecificationsV = !imageSpecificationsV"
                  >
                    <el-checkbox
                      v-model="imageSpecificationsV"
                      @change="addNormesImage"
                      >添加规格图片</el-checkbox
                    >
                  </span>
                  <!-- 规格项右上方删除图标 -->
                  <div
                    class="delIcon"
                    style="width: 73%; height: 100%; display: flex"
                  >
                    <i
                      class="el-icon-error"
                      style="
                        size: 50px;
                        color: #b7b7b7;
                        position: absolute;
                        top: -6px;
                        left: 352px;
                      "
                      @click="reduce(index)"
                    ></i>
                  </div>
                  <div class="moresvalue">
                    <!-- <div style="display: flex" v-show="moresvaluefors">
                      <div
                        style="
                          position: relative;
                          margin-right: 10px;
                          margin-top: 10px;
                          border:1px solid red;
                        "
                        v-for="(item1, index) in item.moresvaluefor"
                        :key="index"
                      >
                        <input
                          type="text"
                          placeholder="请输入规格项值"
                          v-model="item1.type"
                          class="inputValue"
                          @keyup.13="moresvvalues"
                        />
                      </div>
                    </div> -->
                    <!-- 规格项目值展示列表 -->
                    <div
                      :class="
                        index === 0 && imageSpecificationsV
                          ? 'imageSpecificationsList'
                          : 'SpecificationsList'
                      "
                      style="position: relative"
                    >
                      <ul>
                        <template v-for="(spvalue, j) in item.moresvaluefor">
                          <!-- <li v-if="spvalue.type!==''" style="margin-right:12px;" @mouseover="reduceShowValue($event)" @mouseout="reduceHideValue($event)" :key="j"> -->
                          <li
                            v-if="spvalue.type !== ''"
                            style="margin-right: 12px"
                            :key="j"
                          >
                            <div
                              v-if="imageSpecificationsV && index === 0"
                              class="imageSpecificationsListdiv"
                            >
                              <div
                                style="
                                  width: 32px;
                                  height: 32px;
                                  margin-top: -2px;
                                  margin-left: -2px;
                                "
                              >
                                <el-upload
                                  style="
                                    overflow: hidden;
                                    width: 34px;
                                    height: 34px;
                                  "
                                  action="http://guanli.lyqswl.com/index.php/Admin/index/image"
                                  :show-file-list="false"
                                  :on-success=" function (response, file) { return imageUpFilerSpecifications( response, file, item, index, j ); }"
                                  accept="image/*"
                                >
                                  <img
                                    v-if="
                                      imageSpecifications.length > 0 &&
                                      imageSpecifications[j].image != ''
                                        ? imageSpecifications[j].image
                                        : false
                                    "
                                    :src="
                                      imageSpecifications.length > 0
                                        ? (imageSpecifications[j].image.indexOf('http://guanli.lyqswl.com') === -1?'http://guanli.lyqswl.com'+imageSpecifications[j].image:imageSpecifications[j].image)
                                        : ''
                                    "
                                    class="imageSpecificationsListimage"
                                  />
                                  <i
                                    v-else
                                    class="el-icon-plus upImageSpecificationsVS"
                                  ></i>
                                </el-upload>
                              </div>
                            </div>
                            <span>{{ spvalue.type.label?spvalue.type.label:spvalue.type }}</span>

                            <div id="delSv" class="delIconY">
                              <i
                                class="el-icon-error"
                                style="
                                  size: 50px;
                                  color: #b7b7b7;
                                  position: absolute;
                                  top: -6px;
                                  left: 92%;
                                "
                                @click="reduceValue(j, item)"
                              ></i>
                            </div>
                          </li>
                        </template>
                      </ul>
                    </div>
                    <!-- 规格项值录入区域 -->
                    <template>
                      <div
                        v-show="
                          item.text &&
                          (moresfor[index].moresvaluefor.length === 0 ||
                            item.moresvaluefor[item.moresvaluefor.length - 1]
                              .type !== '')
                        "
                        @click="moresvalues(index)"
                        style="width: 95px; padding-left: 14px"
                      >
                        <i
                          style="font-size: 5px; fontweight: bold"
                          class="el-icon-plus"
                        ></i
                        >添加规格值
                      </div>
                      <!-- 判断当前规格是否存在规格项值YES判断末尾规格项值是否为空为空展示NO不展示 -->
                      <div
                        v-show="
                          moresfor[index].moresvaluefor.length > 0
                            ? moresfor[index].moresvaluefor.slice(-1)[0]
                                .type === ''
                              ? true
                              : false
                            : false
                        "
                      >
                        <!-- <div v-show="moresvaluefors"> -->
                        <div
                          style="
                            width: 292px;
                            height: 63px;
                            margin-left: 8px;
                            margin-bottom: 10px;
                            border-radius: 6px;
                            display: block;
                          "
                        >
                          <el-select
                            class="specificationsSelStyle"
                            v-model="inputSpecificationsV"
                            @click="handleChangeV"
                            filterable
                            allow-create
                            placeholder="请输入规格项值"
                          >
                            <el-option
                              style="width: 292px; padding-left: 15px"
                              v-for="item in SpecificationsValue"
                              :key="item.id"
                              :label="item.item"
                              :value="{value:item.id,label:item.item}"
                            >
                            </el-option>
                          </el-select>
                          <!-- <input
                            type="text"
                            v-model="inputSpecificationsV"
                            class="inputValue"
                            style="background-color: transparent; border: 0"
                            placeholder="请输入规格项值"
                          /> -->
                          <div style="text-align: left">
                            <button
                              style="
                                width: 51px;
                                height: 20px;
                                background-color: #436af2;
                                border: 1px solid #436af2;
                                border-radius: 2px;
                                color: #fff;
                                font-size: 12px;
                                margin-right: 3px;
                              "
                              @click="moresvvalues(index)"
                            >
                              确定
                            </button>
                            <button
                              style="
                                width: 51px;
                                height: 20px;
                                background-color: #c9c9c9;
                                border: 1px solid #c9c9c9;
                                border-radius: 2px;
                                color: #fff;
                                font-size: 12px;
                              "
                              @click="moresvCloseValues(index, item)"
                            >
                              取消
                            </button>
                          </div>
                        </div>
                      </div>
                    </template>
                    <!-- <div style="display: flex;" v-show="moresvaluefors">
                      <div
                        style="
                          position: relative;
                          margin-right: 10px;
                        "
                        v-for="(item1, index) in item.moresvaluefor"
                        :key="index"
                      >
                      
                        <input
                          type="text"
                          placeholder="请输入规格项值"
                          v-model="item1.type"
                          class="inputValue"
                          @keyup.13="moresvvalues"
                        />
                        <el-button
                          style="
                            width: 51px;
                            height: 20px;
                            background-color: #436af2;
                            color: #fff;
                            font-size: 14px;
                            margin-top: 20px;
                          "
                          @click="newmore(moresfor)"
                          >确定</el-button
                        >
                        <el-button
                          style="
                            width: 51px;
                            height: 20px;
                            background-color: #e7e7e8;
                            color: #fff;
                            font-size: 14px;
                            margin-top: 20px;
                          "
                          @click="newmore(moresfor)"
                          >取消</el-button
                        >
                        <i
                          class="el-icon-circle-close"
                          style="
                            color: #e0e0e0;
                            position: absolute;
                            top: -5px;
                            z-index: 9;
                            right: -8px;
                          "
                          @click="reduceValue(index,item)"
                        ></i>
                      </div>
                    </div> -->
                  </div>
                </div>
                <el-button
                  style="
                    width: 90px;
                    height: 30px;
                    background-color: #436af2;
                    color: #fff;
                    font-size: 14px;
                    margin-left: 92px;
                    margin-top: 20px;
                  "
                  @click="newmore(moresfor)"
                  :disabled="this.moresfor.length === 4"
                  >添加规格</el-button
                >
                <div class="tableBox">
                  <div class="tableBoxs">
                    <span class="navtitle">批量操作：</span>
                    <div class="nav" v-if="pishow">
                      <span
                        v-for="(item, index) in tabelNav"
                        :key="index"
                        @click="clickNav(item.nav)"
                        >{{ item.nav }}</span
                      >
                    </div>
                    <div class="piliang" v-else>
                      <input
                        type="text"
                        v-model="batchUpdataData"
                        :placeholder="placeNav"
                        placeho
                      />
                      <p class="confirmNav boxNav" @click="confirmNav()">
                        确认
                      </p>
                      <p class="cancelNav boxNav" @click="pishow = true">
                        取消
                      </p>
                    </div>
                  </div>
                  <div class="tableDate">
                    <div class="table">
                      <el-form ref="tableData7" :model="baseForm" >
                        <el-table
                          :data="tableData7"
                          :key="timeStamp"
                          :span-method="objectSpanMethod1"
                          border
                          :header-cell-style="{
                            color: '#3D3D3D',
                            'font-size': '16px',
                            'font-weight': '400',
                          }"
                          style="width: 85%; margin-top: 20px"
                        >
                          <el-table-column label="商品规格" align="center">
                            <el-table-column
                              v-for="(item, index) in moresfor"
                              :key="index"
                              :label="item.text.label?item.text.label:item.text"
                              align="center"
                            >
                              <template slot-scope="scope">
                                <span>{{
                                  index == 0
                                    ? scope.row.norms1Name
                                    : index == 1
                                    ? scope.row.norms2Name
                                    : index == 2
                                    ? scope.row.norms3Name
                                    : index == 3
                                    ? scope.row.norms4Name
                                    : index == 4
                                }}</span>
                              </template>
                            </el-table-column>
                          </el-table-column>
                          <el-table-column label="规格图片" align="center">
                            <template slot-scope="scope">
                              <el-image
                                :src="scope.row.image.indexOf('http://guanli.lyqswl.com') === -1?'http://guanli.lyqswl.com'+scope.row.image:scope.row.image"
                                :preview-src-list="[scope.row.image]"
                                :key="scope.row.id"
                              >
                                <div slot="error" class="image-slot">
                                  <i class="el-icon-picture-outline"></i>
                                </div>
                              </el-image>
                            </template>
                          </el-table-column>
                          <el-table-column :render-header="addRedStar" label="销售价" align="center">
                            <template slot-scope="scope">
                                <input
                                ref="ppap"
                                  class="require_des"
                                  v-model="scope.row.salePrice"
                                /><span> 元</span>
                            </template>
                          </el-table-column>
                          <el-table-column :render-header="addRedStar" label="市场价" align="center">
                            <template slot-scope="scope">
                              <input
                                class="require_des"
                                v-model="scope.row.marketPrice"
                              /><span> 元</span>
                            </template>
                          </el-table-column>
                          <el-table-column label="成本价" align="center">
                            <template slot-scope="scope">
                              <input
                                class="require_des"
                                v-model="scope.row.costPrice"
                              /><span> 元</span>
                            </template>
                          </el-table-column>
                          <el-table-column label="库存" align="center">
                            <template slot-scope="scope">
                              <input
                                class="require_des"
                                v-model="scope.row.stock"
                              /><span> 件</span>
                            </template>
                          </el-table-column>
                          <el-table-column label="重量(kg)" align="center">
                            <template slot-scope="scope">
                              <input
                                class="require_des"
                                v-model="scope.row.weight"
                              />
                            </template>
                          </el-table-column>
                          <el-table-column label="体积(m3)" align="center">
                            <template slot-scope="scope">
                              <input
                                class="require_des"
                                v-model="scope.row.volume"
                              />
                            </template>
                          </el-table-column>
                          <!-- <el-table-column
                            label="商品编码"
                            align="center"
                            width="140"
                          >
                            <template slot-scope="scope">
                              <input
                                class="require_dess"
                                v-model="scope.row.cmmodityCode"
                              />
                            </template>
                          </el-table-column> -->
                          <el-table-column label="是否显示" align="center">
                            <template slot-scope="scope">
                              <el-switch
                                v-model="scope.row.nowShelf"
                                active-color="#13ce66"
                                :active-value="1"
                                :inactive-value="0"
                                inactive-color="#C1C1C1"
                              ></el-switch>
                            </template>
                          </el-table-column>
                        </el-table>
                      </el-form>
                    </div>
                  </div>
                  <!-- tableDate 表格 -->
                </div>
              </div>
            </div>
          </div>
          <!-- 价格库存盒子 -->
          <div class="give-main">
            <div class="title-main">配送信息</div>
            <div id="shipping">
              <el-form :model="formList" :rules="rules" ref="formCon4">
                <el-form-item label="是否包邮">
                  <div class="stateButton">
                    <form name="my_form" method="POST" style="display: flex">
                      <input
                        type="radio"
                        v-model="radioVal"
                        name="question1"
                        value="0"
                        @change="getRadioyes"
                        style="
                          width: 18px;
                          height: 18px;
                          margin-top: 13px;
                          margin-right: 5px;
                          margin-left: 10px;
                        "
                      /><span style="font-size: 0.875rem; margin-top: 0.1rem"
                        >是</span
                      >
                      <input
                        type="radio"
                        v-model="radioVal"
                        name="question1"
                        value="1"
                        @change="getRadiono"
                        style="
                          width: 18px;
                          height: 18px;
                          margin-left: 14px;
                          margin-top: 13px;
                          margin-right: 5px;
                        "
                      /><span style="font-size: 0.875rem; margin-top: 0.1rem"
                        >否</span
                      >
                    </form>
                  </div>
                  <!-- <div class="sportPrice" v-if="sportPrice">
                    <p>运费价格</p>
                    <div><input type="text" vv-model="freightPrice"/> 元</div>
                  </div> -->
                </el-form-item>
              </el-form>
            </div>
          </div>
          <!-- 配送信息盒子 -->
          <div class="other-main">
            <div class="title-main">其他信息</div>
            <div id="fictitious">
              <el-form :model="formFict" ref="formCon5"
                ><!-- :model="formList"表单数据对象 -->
                <el-form-item>
                  <label class="sale">虚拟销量：</label>
                  <el-input
                    v-model="formFict.value"
                    show-word-limit
                    type="text"
                  >
                  </el-input
                  ><span class="element">件</span>
                </el-form-item>
                <el-form-item id="numberBig">
                  <label class="sale">排序：</label>
                  <el-input
                    v-model="formFict.number"
                    show-word-limit
                    type="text"
                  >
                  </el-input>
                  <p class="tips">数字越大越靠前</p>
                </el-form-item>
                <!-- <el-form-item label="立刻上架" :required="true">
                  <div class="stateButton">
                    <form name="my_form" method="POST" style="display: flex">
                      <input
                        type="radio"
                        v-model="radioVal1"
                        name="question1"
                        value="0"
                        @change="getRadioVal"
                        style="
                          width: 18px;
                          height: 18px;
                          margin-top: 13px;
                          margin-right: 5px;
                          margin-left: 10px;
                        "
                      /><span style="font-size: 0.875rem; margin-top: 0.1rem"
                        >是</span
                      >
                      <input
                        type="radio"
                        v-model="radioVal1"
                        name="question1"
                        value="1"
                        @change="getRadioVal"
                        style="
                          width: 18px;
                          height: 18px;
                          margin-left: 14px;
                          margin-top: 13px;
                          margin-right: 5px;
                        "
                      /><span style="font-size: 0.875rem; margin-top: 0.1rem"
                        >否</span
                      >
                    </form>
                  </div>
                </el-form-item> -->
              </el-form>
              <div id="preservation">
                <el-button @click="submithold('基础保存', 0,'formCon')">保存</el-button>
                <el-button @click="nextStep(1)">下一步</el-button>
              </div>
            </div>
          </div>
          <!-- 其他信息盒子 -->
        </div>
        <!-- 第一个盒子切换内容 -->
        <div class="box2" v-if="nums == 1">
          <!-- <div class="title-main">商品详情</div> -->
          <!-- 富文本插件 -->
          <!-- <quilleditor class="editor"></quilleditor> -->
          <wangeditor class="editor" ref="editor" name="editor" :textData="editor_data"></wangeditor>
          <!-- <div class="upload" style="margin-top: 120px; margin-left: 5%">
          </div> -->
          <div class="upload" style="margin-top: 120px; margin-left: 5%">
            <!-- <div
              style="
                font-size: 16px;
                font-weight: 600;
                color: #3d3d3d;
                line-height: 40px;
              "
            >
              上传详情图
            </div> -->
            <!-- <el-upload
              style="overflow: hidden"
              class="avatar-uploader"
              action="http://guanli.lyqswl.com/index.php/Admin/index/image"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              accept="image/*"
            >
              <img v-if="image" :src="image" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload> -->
          </div>
          <div class="button" v-if="true">
            <el-button @click="nextStep(0)">上一步</el-button>
            <el-button @click="submithold('最终保存', 0,'formCon')">保存</el-button>
            <el-button @click="submithold('最终发布', 1,'formCon')">发布</el-button>
          </div>
        </div>
        <!-- 第二个盒子切换内容 -->
      </div>
    </div>
    <!-- paddingpadding -->
  </div>
  <!-- goodadd -->
</template>
<script>
import { debug } from "util";
import quilleditor from "../../components/quilleditor"; //　quilleditor富文本插件
import wangeditor from "../../components/wangeditor"; //　wangeditor富文本插件　－使用中
import descartes from "../../utils/dikaerji";
import addAttriBute from "./GoodsAddChilderAttribute.vue";
import { type } from "os";
export default {
  components: {
    quilleditor,
    addAttriBute,
    wangeditor,
  },
  data() {
    return {
      edit_specs: [], //修改项多规格数据
      options: [],
      goods_id: "0", // 商品id
      //表单数据对象
      formCon: {
        name: "",
        describe: "",
        class: "",
        imageBs: "",
        salePrice: "",
        marketPrice: "",
        sort: "",
        attribute: "",
        atttitle: "",
        atttext: "",
        cmmodityCode: "11", //赠送积分
      },
      rules: {
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        class: [
          { required: true, message: "请选择商品分类", trigger: "change" },
        ],
        imageBs: [
          { required: true, message: "请选择商品图片", trigger: "change" },
        ],
        salePrice: [
          { required: true, message: "请输入销售价", trigger: "blur" },
        ],
        marketPrice: [
          { required: true, message: "请输入市场价", trigger: "blur" },
        ],
      },
      viewType: "", // 进入页面的类型：新增|修改
      SpecificationsData: [], // 规格项数据
      SpecificationsIndex: "", // 规格项id
      SpecificationsValue: [], //规格值数据
      Ispush: false, // 操作结束之后跳转标识
      // 父组件保存商品属性
      fatherAttriButeValue: [],
      // 多级树结构下拉 start
      selectName: "", // select框显示的name
      treeFilter: "", // 搜索框绑定之，用作过滤
      defaultProps: {
        children: "childlist",
        label: "name",
      },
      // 多级树结构下拉 End
      categoriesSelect: [], //  商品属性数据
      labelsData: [], // 商品标签数据下拉数据
      // 过规格批量操作数据内容
      batchUpdataData: "",
      // 规格值是否添加图片标识
      imageSpecificationsV: false,
      // 规格值录入数据
      inputSpecificationsV: "",
      // 表格默认数据
      timeStamp: false,
      // 规格默认下拉数据
      selSpecifications: [
        {
          value: "颜色",
          label: "颜色",
        },
        {
          value: "尺寸",
          label: "尺寸",
        },
        {
          value: "材料",
          label: "材料",
        },
      ],
      newList: [],
      newData: [],
      spanArr: [],
      pos: "",
      spanArr1: [],
      pos1: "",
      baseForm: {
        tableData7: [],
      },
      tableData7: [],
      index: "",
      shopType: [
        {
          name: "颜色",
          typeNames: [
            { type: "红色", img: "" },
            { type: "绿色", img: "" },
          ],
        },
        {
          name: "材料",
          typeNames: [
            { type: "棉花", img: "" },
            { type: "棉麻", img: "" },
          ],
        },
        {
          name: "尺码",
          typeNames: [
            { type: "L", img: "" },
            { type: "ML", img: "" },
          ],
        },
      ],
      tableData: [],
      selectlistRow: [],
      rowNum: 1,
      navBarFixed: false,
      navBarFixeds: false,
      commodityMore: false, // 是否打开多规格设置，默认为否
      main_list: [{ title: "基础设置" }, { title: "商品详情" }],
      nums: 0,
      //基础信息上传图片定义
      commodityImage: [],
      commodityImageSave: [],
      //基础信息上传视频定义
      commodityVideo: "",
      // 多规格值上传图片
      imageSpecifications: [],
      imageSpecificationsSave: [],
      attbox: false,
      attributes: [],
      formPrice: {
        salePrice: "", // 销'售价
        marketPrice: "", // 市'场价
        costPrice: "", // 成'本价
        cmmodityCode: "", // 商品编码
      },
      formWeigh: {
        weight: "", // 重'量
        volume: "", // 体'积
        stock: "", // 库'存
        cmmodityCode: "", // 商'品编码
      },
      formFict: {
        value: "",
        number: "",
      },
      formList: {},
      radioVal1: "0", // 排序
      radioVal: "0", // 是否包邮
      sportPrice: false,
      formList: {}, //配送信息
      freightPrice: "", //运费价格
      //启用多规格
      moresfor: [],

      //规格显示与隐藏
      moresfors: false,
      //规格值显示与隐藏
      moresvaluefors: false,
      //批量操作
      tabelNav: [
        { nav: "销售价" },
        { nav: "市场价" },
        { nav: "成本价" },
        { nav: "库存" },
        { nav: "重量(kg)" },
        { nav: "体积(m3)" },
        { nav: "商品编码" },
      ],
      pishow: true,
      placeNav: "",
      editor_data: "",
    };
    let validateImage = (rule, value, callback) => {
      //验证器
      if (!this.checkImgSuccess) {
        //为true代表图片在  false报错
        callback(new Error("请上传图片"));
      } else {
        callback();
      }
    };
  },
  watch: {
    // 监听过滤，绑定的treeFilter
    treeFilter(val) {
      this.$refs.tree.filter(val); // 搜素框键入值改变，作为执行树形控件的过滤事件filterNode
    },
  },
  methods: {
    addNormesImage(){
      this.imageSpecificationsV = !this.imageSpecificationsV;
      // 如果图片数据为空则不在刷新
      if (this.imageSpecifications.length === 0) {
        return;
      }
      if (this.imageSpecificationsV === false) {
        for (let i = 0; i < this.imageSpecifications.length; i++) {
          this.imageSpecifications[i].image = "";
        }
      }
      this.getList();
    },
    // select搜索
    remoteMethod(query) {
      this.$refs.tree.filter(query); // 搜素框键入值改变，作为执行树形控件的过滤事件filterNode
    },
    addRedStar(h, { column }) {
      // 给表头加必选标识
      return [
        h("span", { style: "color: red" }, "*"),
        h("span", " " + column.label),
      ];
    },
    // 结构数点击事件
    handleNodeClick(data) {
      // 只允许选择最下级分类
      if (data.childlist) {
        this.$message({
          message: "请选择最下级分类",
          type: "error",
        });
      } else {
        this.options = {
          label: data.name,
          value: data.id,
        };
        this.$set(this.formCon, "class", data.id);
        this.treeFilter = "";
        this.$refs.select.blur();
      }
    },
    // 模糊查询
    filterNode(value, data) {
      if (!value) return true;
      let filterRes = data.name.indexOf(value) !== -1;
      return filterRes;
    },
    // 上一步、下一步跳转
    nextStep(index) {
      if (index === 1) {
        // 跳转详情时进行必输校验
        // 对于多个form进行promise封装进行同时验证
        let formArr = [];
        let norms_many = "";
        if (this.commodityMore) {
          formArr = ["formCon1", "formCon4"];
          for (let i = 0; i < this.tableData7.length; i++) {
            if (
              this.tableData7[i].salePrice === "" ||
              this.tableData7[i].marketPrice === ""
            ) {
              norms_many = "1";
              break;
            }
          }
        } else {
          formArr = ["formCon1", "formCon2"];
        }
        var resultArr = []; //用来接受返回结果的数组
        var _self = this;
        function checkForm(formName) {
          //封装验证表单的函数
          var result = new Promise(function (resolve, reject) {
            _self.$refs[formName].validate((valid) => {
              if (valid) {
                resolve();
              } else {
                reject();
              }
            });
          });
          resultArr.push(result); //push 得到promise的结果
        }
        formArr.forEach((item) => {
          //根据表单的ref校验
          checkForm(item);
        });
        if (this.commodityMore && norms_many === "1") {
          this.$message({
            type: "error",
            message: "请填完必输选项进行操作",
          });
        } else {
          Promise.all(resultArr)
            .then((values) => {
              this.nums = index;
            })
            .catch((_) => {
              this.$message({
                type: "error",
                message: "请填完必输选项进行操作",
              });
            });
        }
      } else {
        this.nums = index;
      }
    },
    // state为流程步骤为0为基础信息保存为1为最终保存,IsnowShelf为0即保存为1为上架
    submithold(state, IsnowShelf, formName) {
      // 将规格项内容处理为一维数组
      let spec_list = [];
      for (let i = 0; i < this.moresfor.length; i++) {
        spec_list.push(this.moresfor[i].text.value);
      }
      // 如果在商品详情页面中则处理富文本返回数据，反之空处理
      if (this.nums === 1) {
        this.editor_data = this.$refs.editor.submit();
      } else {
        this.editor_data = "";
      }
      for(let i =0; i < this.commodityImage.length; i++) {
        let goods_img_url = this.commodityImage[i].image_url.replace('http://guanli.lyqswl.com',"");
        this.commodityImage[i].image_url = goods_img_url;
      }
      let param = {
        id: this.goods_id,
        goods_name: this.formCon.name, // 商品名称
        desp: this.formCon.describe, // 描述
        cat_id: this.formCon.class, // 分类id
        goods_type: this.formCon.sort, // 商品标签
        attr: JSON.stringify(this.fatherAttriButeValue), // 属性
        imgs: JSON.stringify(this.commodityImage), // 图片
        video: this.commodityVideo, // 视频
        mtp_spec: this.commodityMore ? "2" : "1", // 1单规格2多规格
        price: this.formPrice.salePrice, // 销售价
        mk_price: this.formPrice.marketPrice, // 市场价
        cost_price: this.formPrice.costPrice, // 成本价
        weight: this.formWeigh.weight, // 重量
        volume: this.formWeigh.volume, // 体积
        stock: this.formWeigh.stock, // 库存
        goods_sn: this.formWeigh.cmmodityCode, // 商品编码
        give_integral: this.formCon.cmmodityCode, // 赠送积分
        spec: JSON.stringify(spec_list), // 规格项表头
        spec_list:
          this.tableData7.length > 0 ? JSON.stringify(this.tableData7) : "", // 多规格数组
        free: this.radioVal, // 是否包邮1是0否
        // postage: this.freightPrice, // 邮费
        vt_sales: this.formFict.value, // 虚拟销量
        sort: this.formFict.number, // 排序
        is_show: IsnowShelf, // 上架1是0否
        content: this.editor_data, // 详情
      };
      console.log("保存的参数：", param);
      if (state.indexOf("最终") === -1) {
        // 对于多个form进行promise封装进行同时验证
        let formArr = [];
        let norms_many = "";
        if (this.commodityMore) {
          formArr = ["formCon1", "formCon4"];
          for (let i = 0; i < this.tableData7.length; i++) {
            if (
              this.tableData7[i].salePrice === "" ||
              this.tableData7[i].marketPrice === ""
            ) {
              norms_many = "1";
              break;
            }
          }
        } else {
          formArr = ["formCon1", "formCon2"];
        }
        var resultArr = []; //用来接受返回结果的数组
        var _self = this;
        function checkForm(formName) {
          //封装验证表单的函数
          var result = new Promise(function (resolve, reject) {
            _self.$refs[formName].validate((valid) => {
              if (valid) {
                resolve();
              } else {
                reject();
              }
            });
          });
          resultArr.push(result); //push 得到promise的结果
        }
        formArr.forEach((item) => {
          //根据表单的ref校验
          checkForm(item);
        });
        if (this.commodityMore && norms_many === "1") {
          this.$message({
            type: "error",
            message: "请填完必输选项进行操作",
          });
          return;
        } else {
          Promise.all(resultArr)
            .then((values) => {
              this.$axios({
                method: "post",
                url: "Goods/save_goods",
                params: param,
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded",
                },
              }).then(function (res) {});
              let TextMessage = "";
              this.viewType === "add"
                ? (TextMessage = "保存成功")
                : (TextMessage = "修改成功");
              switch (state) {
                case "最终保存":
                  this.Ispush = true;
                  break;
                case "最终发布":
                  TextMessage = "发布成功";
                  this.Ispush = true;
                  break;
              }
              this.$message({
                message: TextMessage,
                type: "success",
              });
              if (this.Ispush) {
                this.$router.push({ path: "/machine/ManageGoods" });
              }
            })
            .catch((_) => {
              this.$message({
                type: "error",
                message: "请填完必输选项进行操作",
              });
              return;
            });
        }
      } else {
        this.$axios({
          method: "post",
          url: "Goods/save_goods",
          params: param,
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
        }).then(function (res) {});
        let TextMessage = "";
        this.viewType === "add"
          ? (TextMessage = "保存成功")
          : (TextMessage = "修改成功");
        switch (state) {
          case "最终保存":
            this.Ispush = true;
            break;
          case "最终发布":
            TextMessage = "发布成功";
            this.Ispush = true;
            break;
        }
        this.$message({
          message: TextMessage,
          type: "success",
        });
        if (this.Ispush) {
          this.$router.push({ path: "/machine/ManageGoods" });
        }
      }
    },
    descartes, //笛卡尔积算法
    // 合并行数
    objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
      // columnIndex === 0 找到第一列，实现合并随机出现的行数
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
        // columnIndex === 1 找到第二列，合并他的列数-修改：第二行不在合并操作
      }
      //  else if (columnIndex === 1) {
      //   const _row = this.spanArr1[rowIndex];
      //   const _col = _row > 0 ? 1 : 0;
      //   return {
      //     rowspan: _row,
      //     colspan: _col,
      //   };
      // }
    },
    //转换数据
    getList(obj) {
      this.tableData7 = [];
      // 根据规格是否唯一进行单独处理
      if (this.newData.length === 1) {
        this.newList = this.newData;
        for (let index = 0; index < this.newList[0].length; index++) {
          this.tableData7.push({
            item_id: "0",
            norms1Name: this.newList[0][index].label
              ? this.newList[0][index].label
              : this.newList[0][index], // 规格1 lable
            norms1: this.newList[0][index].value
              ? this.newList[0][index].value
              : this.newList[0][index], // 规格1 value
            norms2Name: "", // 规格2 lable
            norms2: "",
            norms3Name: "", // 规格3 lable
            norms3: "",
            norms4Name: "", // 规格4 lable
            norms4: "",
            image:
              this.imageSpecifications.length > 0
                ? this.imageSpecifications[index].image
                : "", // 规格图片
            salePrice: "", // 销售价格
            marketPrice: "", // 市场价格
            costPrice: "", // 成本价格
            stock: "", // 库存
            weight: "", // 重量
            volume: "", // 体积
            nowShelf: "", // 立即上架
          });
        }
      } else if (this.newData.length > 1) {
        // 需要格式化数组
        // 如果存在有规格项但没规格项值则进行手动拆分否则笛卡尔拆分
        this.newList = this.descartes(this.newData);
        /**图片地址操作 Start*/
        let indexColorNUm = 0; // 默认使用第一张图片
        let imageNewListUrl = ""; // 图片地址
        if (this.imageSpecifications.length > 0) {
          imageNewListUrl = this.imageSpecifications[0].image;
        }
        let htmlText = this.newList[0][0]; // 在数据条数大于1的情况下取第一个规格作为对比项
        /**图片地址操作 End*/
        for (let index = 0; index < this.newList.length; index++) {
          // 使用默认取得的第一个规格与后续规格做对照，如不同则为首规格的下一个规格值图片地址也对应调整
          if (
            this.imageSpecifications.length > indexColorNUm &&
            htmlText !== this.newList[index][0]
          ) {
            indexColorNUm += 1;
            htmlText = this.newList[index][0];
            imageNewListUrl = this.imageSpecifications[indexColorNUm].image;
          }
          this.tableData7.push({
            item_id: "0",
            norms1Name: this.newList[index][0]
              ? this.newList[index][0].label
                ? this.newList[index][0].label
                : this.newList[index][0]
              : "", // 规格项lable
            norms1: this.newList[index][0]
              ? this.newList[index][0].value
                ? this.newList[index][0].value
                : this.newList[index][0]
              : "", // 规格项value
            norms2Name: this.newList[index][1]
              ? this.newList[index][1].label
                ? this.newList[index][1].label
                : this.newList[index][1]
              : "",
            norms2: this.newList[index][1]
              ? this.newList[index][1].value
                ? this.newList[index][1].value
                : this.newList[index][1]
              : "",
            norms3Name: this.newList[index][2]
              ? this.newList[index][2].label
                ? this.newList[index][2].label
                : this.newList[index][2]
              : "",
            norms3: this.newList[index][2]
              ? this.newList[index][2].value
                ? this.newList[index][2].value
                : this.newList[index][2]
              : "",
            norms4Name: this.newList[index][3]
              ? this.newList[index][3].label
                ? this.newList[index][3].label
                : this.newList[index][3]
              : "",
            norms4: this.newList[index][3]
              ? this.newList[index][3].value
                ? this.newList[index][3].value
                : this.newList[index][3]
              : "",
            image: imageNewListUrl,
            salePrice: "", // 销售价格
            marketPrice: "", // 市场价格
            costPrice: "", // 成本价格
            stock: "", // 库存
            weight: "", // 重量
            volume: "", // 体积
            nowShelf: "", // 立即上架
          });
        }
      } else {
        this.tableData7.push({
          item_id: "0",
          norms1Name: "",
          norms1: "",
          norms2Name: "",
          norms2: "",
          norms3Name: "",
          norms3: "",
          norms4Name: "",
          norms4: "",
          image: "",
          salePrice: "", // 销售价格
          marketPrice: "", // 市场价格
          costPrice: "", // 成本价格
          stock: "", // 库存
          weight: "", // 重量
          volume: "", // 体积
          nowShelf: "", // 立即上架
        });
      }
      // 如果是修改数据初次加载进行价格赋值
      if (
        obj === "edit_first" &&
        this.viewType === "edit" &&
        this.edit_specs.length > 0
      ) {
        for (let i = 0; i < this.edit_specs.length; i++) {
          this.tableData7[i].image = this.edit_specs[i].image;
          this.tableData7[i].salePrice = this.edit_specs[i].salePrice;
          this.tableData7[i].marketPrice = this.edit_specs[i].marketPrice;
          this.tableData7[i].costPrice = this.edit_specs[i].costPrice;
          this.tableData7[i].stock = this.edit_specs[i].stock;
          this.tableData7[i].weight = this.edit_specs[i].weight;
          this.tableData7[i].volume = this.edit_specs[i].volume;
          this.tableData7[i].nowShelf = this.edit_specs[i].nowShelf;
        }
      }
      this.timeStamp = !this.timeStamp;
      this.getSpanArr(this.tableData7);
    },
    //计算位置的方法
    getSpanArr(data) {
      this.spanArr = [];
      this.pos = "";
      this.spanArr1 = [];
      this.pos1 = "";
      // 如果数据为空，重置表格
      if (data.length === 0) {
        return;
      }
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].norms1 === data[i - 1].norms1) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr1.push(1);
          this.pos1 = 0;
        } else {
          //如果笛卡尔积一直递增下去的话 这是一个很蠢的方法 由于我的要求层数是已知的 这里偷懒了 不然应该用for循环
          if (data[i].norms2 === data[i - 1].norms2) {
            this.spanArr1[this.pos1] += 1;
            this.spanArr1.push(0);
          } else {
            this.spanArr1.push(1);
            this.pos1 = i;
          }
        }
      }
    },

    // 获取表格选中时的数据
    selectRow(val) {
      this.selectlistRow = val;
    },
    // 增加行
    addRow() {
      var list = {
        rowNum: this.rowNum,
        sellingPrice: "", //销售价
        marketPrice: "", //市场价
        costPrice: "", //成本价
        require_des: "",
        remark: "",
      };
      this.tableData.unshift(list);
      this.rowNum += 1;
    },
    // 删除方法
    // 删除选中行
    delData() {
      for (let i = 0; i < this.selectlistRow.length; i++) {
        let val = this.selectlistRow;
        // 获取选中行的索引的方法
        // 遍历表格中tableData数据和选中的val数据，比较它们的rowNum,相等则输出选中行的索引
        // rowNum的作用主要是为了让每一行有一个唯一的数据，方便比较，可以根据个人的开发需求从后台传入特定的数据
        val.forEach((val, index) => {
          this.tableData.forEach((v, i) => {
            if (val.rowNum === v.rowNum) {
              // i 为选中的索引
              this.tableData.splice(i, 1);
            }
          });
        });
      }
      // 删除完数据之后清除勾选框
      this.$refs.table.clearSelection();
    },
    //新增属性
    newattribute() {
      this.$refs.addBute.show();
    },
    // 接收子组件（商品属性弹窗录入）录入数据
    attributValue(data) {
      data.attr_id = "0";
      this.fatherAttriButeValue.push(data);
    },
    // 删除商品属性
    attriDelBute(index) {
      this.fatherAttriButeValue.splice(index, 1);
    },
    //删除新增属性
    deleteatt(index) {
      this.attributes.splice(index, 1);
    },
    // 展示规格项录入框
    newmore(mf) {
      if (
        this.moresfor.length > 0 &&
        this.moresfor[this.moresfor.length - 1].text === ""
      ) {
        this.$message({
          type: "error",
          message: "请先录入规格项" + this.moresfor.length,
        });
        return;
      }
      // 清除未录入的规格项值
      for (let i = 0; i < this.moresfor.length; i++) {
        for (let j = 0; j < this.moresfor[i].moresvaluefor.length; j++) {
          if (this.moresfor[i].moresvaluefor[j].type === "") {
            this.moresfor[i].moresvaluefor.splice(j, 1);
          }
        }
      }
      if (
        this.moresfor.length > 0 &&
        this.moresfor[this.moresfor.length - 1].upload === "0"
      ) {
        this.moresfor[this.moresfor.length - 1].upload = "1"; // 标记为已上传
        let param = {
          name: this.moresfor[this.moresfor.length - 1].text,
        };
        // 将这次的规格数据录入
        this.$axios({
          url: "goods/add_spec",
          methods: "post",
          params: param,
        }).then((res) => {
          // console.log("数据上传成功");
        });
      }
      this.moresfors = true; // 规格录入框显示
      let objs = { text: "", upload: "0", moresvaluefor: [] }; // test为规格 moresvaluefor为规格值
      this.moresfor.push(objs); // 添加一个空的规格
    },
    //展示规格值输入框
    moresvalues(index) {
      this.getSpecificationsValue(
        this.moresfor[index].text
          ? this.moresfor[index].text.value
          : this.moresfor[index].text
      ); // 通过index获取所属规格对应的规格项下拉数据
      // 如果该规格未上传进行录入上传
      if (this.moresfor[index].upload === "0") {
        this.moresfor[index].upload = "1"; // 标记为已上传
        let param = {
          name: this.moresfor[index].text,
        };
        // 将对应的规格数据录入
        this.$axios({
          url: "goods/add_spec",
          methods: "post",
          params: param,
        }).then(function (res) {
          // console.log("数据上传成功");
        });
      }
      this.moresvaluefors = true;
      if (index === 0) {
        this.imageSpecifications.push({ image: "" }); // 给图片数组增加一个空数组
      }
      let objss = { type: "" };
      this.moresfor[index].moresvaluefor.push(objss);
    },
    // 规格值鼠标移入移出切换删除图标
    reduceShowValue(e) {
      e.currentTarget.lastElementChild.className = "SpecificationsMouseIn";
    },
    reduceHideValue(e) {
      e.currentTarget.lastElementChild.className = "SpecificationsMouseOut";
    },
    //删除规格
    reduce(index) {
      // 如果是首项规格数据被删除，则一并清空其图片
      if (index === 0) {
        this.imageSpecifications = [];
      }
      this.moresfor.splice(index, 1);
      this.newData.splice(index, 1);
      this.getList();
    },
    //删除规格值
    reduceValue(index, obj) {
      let textR = obj.text;
      for (let i = 0; i < this.moresfor.length; i++) {
        if (this.moresfor[i].text === textR) {
          if (i === 0) {
            this.imageSpecifications.splice(index, 1); // 如果是第一项规格值数据，删除规格值需清空对应的图片数据
          }
          this.moresfor[i].moresvaluefor.splice(index, 1);
          // 如果删除的规格项值为最后元素则一并删除对应数组
          if (this.newData[i].length === 1) {
            this.newData[i][index] = ""; // 虽然规格值删除但规格依在故置空
          } else {
            this.newData[i].splice(index, 1);
          }
        }
      }
      this.getList();
    },
    // 监听规格项数据
    handleChangeN(params) {
      const { value, label } = params;
    },
    // 监听规格项值数据
    handleChangeV(params) {
      const { value, label } = params;
    },
    // 规格值数据录入
    moresvvalues(num, text) {
      // 判断是否存在两个空的元素（因考虑数据展示可能留存了一个空元素导致重复），是则保留一个空元素为其赋值
      if (
        this.moresfor[num].moresvaluefor.length > 1 &&
        this.moresfor[num].moresvaluefor[
          this.moresfor[num].moresvaluefor.length - 2
        ].type === ""
      ) {
        this.moresfor[num].moresvaluefor.splice(-1, 1);
      }
      this.moresfor[num].moresvaluefor.splice(-1, 1, {
        type: this.inputSpecificationsV,
      });
      // 将对应的规格项值数据录入
      let param = {
        spec_id: this.SpecificationsIndex,
        item: this.inputSpecificationsV,
      };
      this.$axios({
        url: "goods/add_spec_item",
        methods: "post",
        params: param,
      }).then(function (res) {
        // console.log("规格值数据上传成功");
      });
      this.inputSpecificationsV = "";
      this.handleMoreF();
      this.moresvaluefors = false;
    },
    // 规则值取消录入
    moresvCloseValues(index, obj) {
      if (obj.text === this.moresfor[0].text) {
        this.imageSpecifications.splice(index, 1); // 如果是首项规格则删除对应图片数据
      }
      this.moresfor[index].moresvaluefor.splice(-1, 1);
      this.inputSpecificationsV = "";
      this.moresvaluefors = false;
      this.getList();
    },
    tabBox(index) {
      this.nums = index;
    },
    clickNav(e) {
      let placeNav = e;
      this.placeNav = placeNav;
      this.pishow = false;
    },
    confirmNav() {
      // 根据批量操作动态修改
      switch (this.placeNav) {
        case "销售价":
          for (let i = 0; i < this.tableData7.length; i++) {
            this.tableData7[i].salePrice = this.batchUpdataData;
          }
          break;
        case "市场价":
          for (let i = 0; i < this.tableData7.length; i++) {
            this.tableData7[i].marketPrice = this.batchUpdataData;
          }
          break;
        case "成本价":
          for (let i = 0; i < this.tableData7.length; i++) {
            this.tableData7[i].costPrice = this.batchUpdataData;
          }
          break;
        case "库存":
          for (let i = 0; i < this.tableData7.length; i++) {
            this.tableData7[i].stock = this.batchUpdataData;
          }
          break;
        case "重量(kg)":
          for (let i = 0; i < this.tableData7.length; i++) {
            this.tableData7[i].weight = this.batchUpdataData;
          }
          break;
        case "体积(m3)":
          for (let i = 0; i < this.tableData7.length; i++) {
            this.tableData7[i].volume = this.batchUpdataData;
          }
          break;
        case "商品编码":
          for (let i = 0; i < this.tableData7.length; i++) {
            this.tableData7[i].cmmodityCode = this.batchUpdataData;
          }
          break;
        default:
          "暂不处理";
      }
      this.batchUpdataData = "";
      this.pishow = true;
    },
    getRadioyes() {
      this.sportPrice = false;
    },
    getRadiono() {
      this.sportPrice = true;
    },

    //返回上一页
    goOff() {
      this.$router.back();
    },
    //上传图片成功后执行钩子函数
    handleAvatarSuccess(res, file) {
      let img_save = {
        img_id: "0",
        goods_id: this.goods_id,
        image_url: res.data,
      };
      this.commodityImage.push(img_save);
      // let img_param = {
      //   img_id: "0",
      //   goods_id: this.goods_id,
      //   image_url: URL.createObjectURL(file.raw),
      // };
      // this.commodityImage.push(img_param);
      // this.commodityImage.push(URL.createObjectURL(file.raw));
      this.$set(this.formCon, "imageBs", "1");
    },
    // 上传视频成功后执行钩子函数
    handleVideoSuccess(res, file) {
      this.commodityVideo = res.data;
      // this.commodityVideo = URL.createObjectURL(file.raw);
    },
    // 删除图片
    delImage(index) {
      this.commodityImage.splice(index, 1);
      if (this.commodityImage.length > 0) {
        this.$set(this.formCon, "imageBs", "1");
      } else {
        this.$set(this.formCon, "imageBs", "");
      }
    },
    // 多规格值图片上传
    imageUpFilerSpecifications(response, file, fileList, index, cindex) {
      // this.imageSpecifications.splice(cindex, 1, {
      //   image: URL.createObjectURL(file.raw),
      // });
      this.imageSpecifications.splice(cindex, 1, {
        image: response.data,
      });
      this.getList();
    },
    //显示与隐藏
    getRadioVal() {
      // console.log(this.radioVal,'二级显示隐藏');
    },
    //头部导航栏吸顶效果
    watchScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //  当滚动超过 50 时，实现吸顶效果
      if (scrollTop > 70) {
        this.navBarFixed = true;
        this.navBarFixeds = true;
      } else {
        this.navBarFixed = false;
        this.navBarFixeds = false;
      }
    },
    //获取商品分类
    getCategories() {
      this.$axios({
        url: "Goods/get_cate_list",
        methods: "post",
        params: { dpid: "" },
      }).then((res) => {
        this.categoriesSelect = res.data.data;
      });
    },
    // 获取商品标签数据
    getlabelsData() {
      this.$axios({
        url: "goods/goods_type_list",
        methods: "post",
        params: {},
      }).then((res) => {
        this.labelsData = res.data.data;
      });
    },
    // 获取规格数据
    getSpecifications() {
      this.$axios({
        url: "goods/spec_list",
        methods: "post",
        params: {},
      }).then((res) => {
        this.SpecificationsData = res.data.data;
      });
    },
    // 获取规格值数据
    getSpecificationsValue(val) {
      this.$axios({
        url: "goods/spec_item",
        methods: "post",
        params: { spec_id: val },
      }).then((res) => {
        this.SpecificationsValue = res.data.data;
      });
    },
    // 获取修改数据
    getData(obj) {
      this.$axios({
        url: "Goods/find_good",
        methods: "post",
        params: { id: obj },
      }).then((res) => {
        let goodData = res.data.data;
        console.log("需要修改的数据：", goodData);
        (this.goods_id = goodData.goods_id), // 商品ID
          (this.formCon = {
            name: goodData.goods_name, // 名称
            describe: goodData.goods_remark, // 描述
            sort: goodData.goods_type, // 标签
            cmmodityCode: goodData.give_integral, // 赠送积分
          });
        this.$set(this.formCon, "class", goodData.cat_id);
        this.$axios({
          url: "Goods/find_cate",
          methods: "post",
          params: { id: goodData.cat_id },
        }).then((res) => {
          this.options = {
            label: res.data.data.name,
            value: goodData.cat_id,
          };
        });
        if (goodData.imgs.length > 0) {
          this.formCon.imageBs = "1";
        }
        let imgall = [];
        for (let i = 0; i < goodData.imgs.length; i++) {
          let imgsrc = goodData.imgs[i].image_url;
          goodData.imgs[i].image_url = imgsrc;
        }
        this.commodityImage = goodData.imgs; // 图片
        this.commodityVideo = goodData.video; // 视频
        // 商品属性
        this.fatherAttriButeValue = [];
        for (let i = 0; i < goodData.attr.length; i++) {
          let param = {
            attr_id: goodData.attr[i].attr_id,
            attributId: goodData.attr[i].attr_id,
            attributName: goodData.attr[i].attr_name,
            attributValue: goodData.attr[i].attr_value,
          };
          this.fatherAttriButeValue.push(param);
        }
        if (goodData.mtp_spec === 1) {
          // 单双规格分类: 1为单规格，2为多规格
          this.commodityMore = false;
          this.formPrice = {
            salePrice: goodData.shop_price, // 销售价
            marketPrice: goodData.market_price, // 市场价
            costPrice: goodData.cost_price, // 成本价
          };
          this.formWeigh = {
            weight: goodData.weight, // 重量
            volume: goodData.volume, // 体积
            stock: goodData.store_count, // 库存
            cmmodityCode: goodData.goods_sn, // 商品编码
          };
        } else {
          this.commodityMore = true;
          this.moresfors = true; // 规格录入框显示
          // 还原多规格数据存储格式
          this.moresfor = [];
          for (let i = 0; i < goodData.spec.length; i++) {
            // 获取规格项
            let text_t = {
              value: String(goodData.spec[i].id),
              label: goodData.spec[i].name,
            };
            let param = {
              moresvaluefor: [],
              text: "",
              upload: "1",
            };
            this.moresfor.push(param);
            this.$set(this.moresfor[i], "text", text_t);
          }
          this.imageSpecifications = [];
          for (let i = 0; i < this.moresfor.length; i++) {
            for (let j = 0; j < goodData.spec_item_list.length; j++) { // 获取规格值
              let json_norms = JSON.parse(goodData.spec_item_list[j].sku);
              let norms_n = "norms" + (i + 1) + "Name";
              let norms_v = "norms" + (i + 1);
              let param = {
                type: {
                  label: json_norms[norms_n],
                  value: json_norms[norms_v],
                },
              };
              this.moresfor[i].moresvaluefor.push(param);
              if (i === 0) {
                if(json_norms.image !== "") {
                  this.imageSpecificationsV = true;
                }
                let img_p = { image: json_norms.image };
                this.imageSpecifications.push(img_p);
              }
            }
            // 为后面处理价格相关
            this.edit_specs = [];
            for (let i = 0; i < goodData.spec_item_list.length; i++) {
              let json_D_norms = JSON.parse(goodData.spec_item_list[i].sku);
              this.edit_specs.push(json_D_norms);
            }
            var result = [];
            var obj = {};
            for (var k = 0; k < this.moresfor[i].moresvaluefor.length; k++) {
              // 规格项值去重并重构数据
              if (!obj[this.moresfor[i].moresvaluefor[k].type.value]) {
                result.push(this.moresfor[i].moresvaluefor[k]);
                obj[this.moresfor[i].moresvaluefor[k].type.value] = true;
              }
            }
            this.moresfor[i].moresvaluefor = result;
          }
          this.handleMoreF("edit_first");
        }
        this.radioVal = parseInt(goodData.is_free_shipping); // 是否包邮
        this.formFict = {
          value: goodData.sales_sum, // 虚拟销量
          number: goodData.sort, // 排序
        };
        this.editor_data = goodData.goods_content;
      });
    },
    // 通过morefor规格项和规格值数组进行数据处理
    handleMoreF(obj) {
      this.newData = [];
      // 循环规格数组
      for (let i = 0; i < this.moresfor.length; i++) {
        let newlist = [];
        // 循环规格中规格值数组
        for (
          let index = 0;
          index < this.moresfor[i].moresvaluefor.length;
          index++
        ) {
          newlist.push(this.moresfor[i].moresvaluefor[index].type);
        }
        // 为了控制表格数据展示，有效数组增加新元素，无效数据增加空元素
        if (this.moresfor[i].moresvaluefor.length > 0) {
          this.newData.push(newlist);
        } else {
          newlist = ["null"];
          this.newData.push(newlist);
          this.newData[i][this.newData[i].length - 1] = "";
        }
      }
      this.getList(obj);
    },
  },
  mounted() {
    // 事件监听滚动条
    window.addEventListener("scroll", this.watchScroll);
  },
  created() {
    this.viewType = this.$route.params.type;
    this.getCategories();
    if (this.viewType === "edit") {
      let editId = this.$route.params.edit_data;
      this.getlabelsData();
      this.getData(editId);
    }
    this.getSpecifications();
  },
};
</script>
<style src="../../components/css/machine_css/goodsadd.css"  scoped></style>
<style scoped>
/* 新增商品属性中录入框样式  新增属性值下拉框*/
.commodity-attribute /deep/ .el-input {
  /* width: 258px !important; */
  width: 100% !important;
  margin-bottom: 15px;
  height: 37px;
}
</style>